<template>
	<t-modal :title="$ct('selectBuildWorkFlowType','选择创建流程类型')" :width="450" :visible="visible" :footer="null" @ok="
      () => {
        $emit('ok');
      }
    " @cancel="
      () => {
        $emit('cancel');
      }
    ">
		<div>
			<div style="display: flex;justify-content: space-around;">
				<div class="card-item" @click="cardClick('customerForm')">
					<div class="img-box">
						<img src="~@/assets/img/report01.png" />
					</div>
					<div class="text-box">
						<div class="title">{{$ct("customerForm","自定义表单")}}</div>
						<div class="text">{{$ct("relateFormInFormCenter","关联表单中心表单")}}</div>
					</div>
				</div>
				<div class="card-item" @click="cardClick('systemForms')">
					<div class="img-box">
						<img src="~@/assets/img/report02.png" />
					</div>
					<div class="text-box">
						<div class="title">{{$ct("systemForms","系统表单")}}</div>
						<div class="text">{{$ct("relateFormInSystem","关联系统中的表单")}}</div>
					</div>
				</div>
				<!-- <div class="card-item" @click="cardClick('createTemplate')">
					<div class="img-box">
						<img src="~@/assets/img/report02.png" />
					</div>
					<div class="text-box">
						<div class="title">从模板创建</div>
						<div class="text">基于模板开始创建</div>
					</div>
				</div> -->
			</div>
			<div class="text-center text-bold margin-top-sm">
				<a-tooltip placement="topLeft">
					<template slot="title">
						<span>基于自定义表单开始创建、基于系统表单开始创建、基于模板开始创建</span>
					</template>
					<span style="cursor: pointer;">{{$ct("HowToSelect","如何选择")}}？</span>
				</a-tooltip>
			</div>
		</div>
	</t-modal>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {

			};
		},
		created() {

		},
		methods: {
			cardClick(e) {
				this.$emit("click", e)
			}
		}
	};
</script>
<style lang="less" scoped>
.card-item {
  transition: 0.3s all;
  cursor: pointer;
  width: 181px;
  border: 1px solid #F0F2F5;
  border-radius: 10px;
  .img-box{
    padding: 40px 20px 20px;
    img{
      width: 100%;
    }
  }
}

	.card-item:hover {
		transform: scale(1.02);
    border: 1px solid #1890ff;
    box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
	}

	.text-box{
		text-align: center;
		.title{
			font-size: 16px;
			color: #171a1d;
			font-weight: 600;
		}
		.text{
			margin: 5px 0 15px;
			font-size: 12px;
			color: rgb(206 206 206);
		}
	}
</style>
